<template>
<div class="table-scroll">
  <table class="et-table hover">

    <table-header :has-checkbox="hasCheckbox"
                  :headers="headers"
                  :choose-all-handler="chooseAllHandler"
                  :choose-items="chooseItems"
                  :row-num="rows ? rows.length : 0"
                  :filter-handler="filterHandler"
                  :filters="filters"
                  :clear-filter-handler="clearFilter" />

    <tbody>
      <tr v-if="rows" v-for="(row, idx) in rows" :key="idx">
        <td v-if="hasCheckbox">
          <label class="et-checkbox">
            <input type="checkbox" :value="idx" v-model="chooseItems" />
            <span></span>
          </label>
        </td>
        <template v-for="(col, idx) in colAttrs">
          <td v-html="row[col]" :key="idx"></td>
        </template>
        <td v-if="hasOpsBtns" class="ops-column">
          <div class="et-ops-group">
            <slot name="opsBtns" :index="idx"></slot>
          </div>
        </td>
        <td v-if="hasFilter"></td>
      </tr>
      <tr v-if="!rows || rows.length === 0">
        <td class="no-data" :colspan="noDataColspan">
          {{ $t('cmpt.dataEmpty') }}
        </td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
import update from 'immutability-helper';

import TableHeader from './TableHeader';
import { EtIcon } from '../../widgets';

export default {

  components: {
    TableHeader,
    EtIcon
  },

  props:  {
    headers: {
      type: Array,
      requried: true
    },
    hasCheckbox: {
      type: Boolean
    },
    maxRow: {
      type: Number,
      default: 10
    },
    rows: {
      type: Array,
      default() {
        return [];
      }
    },
    queryHandler: {
      type: Function,
      default: () => {}
    },
    hasOpsBtns: {
      type: Boolean
    },
    hasFilter: {
      type: Boolean
    },
    colAttrs: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      chooseItems: [],
      filters: {}
    };
  },

  computed: {
    noDataColspan() {
      let coefficient = 0;
      if (Object.keys(this.filters).length > 0) {
        coefficient++;
      }

      if (this.hasCheckbox) {
        coefficient++;
      }

      return this.headers.length + coefficient;
    }
  },

  watch: {
    chooseItems() {
      this.$emit('chooseLines', {
        lineNum: this.chooseItems
      });
    }
  },

  methods: {

    chooseAllHandler(val) {

      if (val) {
        this.chooseItems = Array.apply(null, {length: this.rows.length}).map(Number.call, Number);
      } else {
        this.chooseItems = [];
      }

    },

    filterHandler({ id, payload }) {

      if (payload) {
        this.filters = { ...this.filters, [id]: payload };
      } else {
        this.filters = update(this.filters, {$unset: [id]});
      }

      this.chooseItems = [];
      this.queryHandler(this.filters);
    },

    clearFilter() {
      this.filters = {};
      this.queryHandler(this.filters);
    },

    clearChooseItems() {
      this.chooseItems = [];
    },

    setLinkFilter({ id, payload }) {
      if (payload) {
        this.filters = { ...this.filters, [id]: payload };
      } else {
        this.filters = update(this.filters, {$unset: [id]});
      }
      this.queryHandler(this.filters);
    }

  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          dataEmpty: "No Data"
        }
      },
      cn: {
        cmpt: {
          dataEmpty: "暂无数据"
        }
      }
    }
  }

};
</script>
